<html>
<!-- facebook seems to want this here-->
<div id="fb-root"></div> 
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<script language="javaScript">
function confirmDelete() {
	return confirm("Are you sure you want to delete?");
}

window.fbAsyncInit = initFacebook;
	
function initFacebook()
{
	FB.init({
		appId  : "388830181146339",
		status : true, // check login status
		cookie : true, // enable cookies to allow the server to access the session
		xfbml  : true  // parse XFBML
	}); 
};

(function() {
		var e = document.createElement('script');
		e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
		e.async = true;
		document.getElementById('fb-root').appendChild(e);
}());

function facebookLogin(imgURL)
{
	var loginUrl="http://www.facebook.com/dialog/oauth/?"+
		"client_id="+"388830181146339"+"&"+
		"redirect_uri="+document.location.href+"&"+
		"scope=publish_stream&"+
		"response_type=token";		
	window.location=loginUrl;
	 
	FB.api('/me/photos', 'post', {
			message: 'Uploaded from http://edit-me.appspot.com',
			access_token: response.authResponse.accessToken, 
			url: imgURL
	});
	alert("Published to Facebook");
}
</script>
</head>


<body id="main">
<div>
	<div id="left_side">
		<img src="/static/logo.png" style="width:100%;height:auto;"/>
		<form method="post" action="/tag/{{image.key}}">
			<p>Enter Tags (separate tags with a space)</p>
			<input type='text' id='tags' name='tags' style="width:90%;"/>
			<input type='submit'/>
		</form>
		<div class="tags">
		<h2>Tags</h2>
		<ul style="padding:0;margin:5%;list-style-position:inside;">
		{% for tag in tags %}
			<form method="post" action="/tag/{{image.key}}?remove={{tag}}">
			<li class="tag"><a href="/browse/?tag={{tag}}">{{tag}}</a>
			<input type='image' src="/static/buttonTagRemove.png"></li>
			</form>
		{% endfor %}
		</ul>
		</div>
		
		<img src="/static/fb_share.gif" onclick="facebookLogin('http://edit-me.appspot.com/image/{{image.key}}');" style="width:90%;height:auto;"/>
	</div>

	<div class="image" id="right_side">
		<a href="http://pixlr.com/express/?s=c&image=http://edit-me.appspot.com/image/{{image.key}}&target=http://edit-me.appspot.com/update/&exit=http://edit-me.appspot.com/view/{{image.key}}&title={{image.key}}&locktitle=true&lockquality=85"><img src="/image/{{image.key}}" title="Edit in pixlr" width="100%" height="auto"/></a>
	</div>
	<div style="float:right;width:64%;">
		<form action="/image/{{image.key}}" method="POST">
		
			{% if owner %}
				<input type='image' src="/static/buttonDelete.png" id='delete' name='delete' value='Delete Image' onClick="return confirmDelete()" style="width:50%;height:auto;float:right;"/>
			{% endif %}
			<input type='image' src="/static/buttonEdit.png" id='save' name='save' value='Save Image' style="width:50%;height:auto;float:right;"/>		</form>
	</div>
	<div style="float:left;width:25%">
		<a href="/"><img src="/static/home.jpg" style="width:100%;height:auto;"/></a>
	</div>
</div>
</body>
</html>
